<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-align: center;
            font-weight: bold;
            width: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        .header{
            position: fixed;
            top: 0;
            height: 100px;
            line-height: 100px;
            background-color: red;
        }
        .content{
            background-color: deepskyblue;
            flex-grow: 1;
            padding-top: 100px;
            padding-bottom: 100px;
        }
        .footer{
            line-height: 100px;
            position: fixed;
            bottom: 0;
            padding-bottom: -100px;
            height:100px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
<div class="header">固定头部!</div>

<div class="content">
    <ul>
        <li>可滑动内容区</li>
        <li>this is my content!1</li>
        <li>this is my content!2</li>
        <li>this is my content!3</li>
        <li>this is my content!4</li>
        <li>this is my content!5</li>
        <li>this is my content!6</li>
        <li>this is my content!7</li>
        <li>this is my content!8</li>
        <li>this is my content!9</li>
        <li>this is my content!10</li>
        <li>this is my content!11</li>
        <li>this is my content!12</li>
        <li>this is my content!13</li>
        <li>this is my content!14</li>
        <li>this is my content!15</li>
        <li>this is my content!16</li>
        <li>this is my content!17</li>
        <li>this is my content!18</li>
        <li>this is my content!19</li>
        <li>this is my content!20</li>
        <li>this is my content!21</li>
        <li>this is my content!22</li>
        <li>this is my content!23</li>
        <li>this is my content!24</li>
        <li>this is my content!25</li>
        <li>this is my content!26</li>
        <li>this is my content!27</li>
        <li>this is my content!28</li>
        <li>this is my content!29</li>
        <li>this is my content!30</li>
        <li>this is my content!31</li>
        <li>this is my content!32</li>
        <li>this is my content!33</li>
        <li>this is my content!34</li>
        <li>this is my content!35</li>
        <li>this is my content!36</li>
        <li>this is my content!37</li>
        <li>this is my content!38</li>
        <li>this is my content!39</li>
        <li>this is my content!40</li>
        <li>this is my content!41</li>
        <li>this is my content!42</li>
        <li>this is my content!43</li>
        <li>this is my content!44</li>
        <li>this is my content!45</li>
        <li>this is my content!46</li>
        <li>this is my content!47</li>
        <li>this is my content!48</li>
        <li>this is my content!49</li>
        <li>this is my content!50</li>
    </ul>
</div>

<div class="footer">固定底座!</div>
</body>
</html>